<template>
  <van-nav-bar
      title="点餐"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="detail">
    <van-card
        :title="business.name"
        :desc="`月销售 ${business.monthSales} +`"
        :thumb="business.mainImage"
    />
    <van-tabbar v-model="active" route >
      <van-tabbar-item :class="{'van-tabbar-item--active':active == 0}" :to="`/business/detail/order?id=${$route.query.id}`" icon="bell" >菜单</van-tabbar-item>
      <van-tabbar-item :class="{'van-tabbar-item--active':active == 1}" :to="`/business/detail/info?id=${$route.query.id}`" icon="shop">商家</van-tabbar-item>
    </van-tabbar>
    <router-view v-slot="{Component}" :business="business">
      <keep-alive >
        <component :is="Component"/>
      </keep-alive>
    </router-view>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "detail",
  setup(){
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    }
  },
  data(){
    return{
      active:'',
      id:'',
      business: {}
    }
  },
  methods:{
    _initOrderList(){
      axios.get(`/ele_server/business/getById?id=${this.id}`).then
      (({data:res}) =>{
        console.log(res)
        if (res.status == 0){
          this.business = res.data;
        }else {
          //TODO 替换成框架的弹窗
          alert(res.message)
        }
      })
    }
  },
  created() {
    this.id = this.$route.query.id;
    this._initOrderList();
  }
}
</script>

<style scoped lang="stylus">
.van-tabbar--fixed
  position relative
</style>